/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2018/11/21 Time: 10:02
 *
 * 报表
 */

import React, {Component} from 'react';
import {
    Text,
    View,
    Image,
    TouchableOpacity,
    ScrollView,
    SafeAreaView,
    StatusBar, AsyncStorage, Platform, BackHandler, Modal,ToastAndroid
} from 'react-native';
import {connect} from 'react-redux';
import {styles} from './ReportScreen.Style';
import LinearGradient from "react-native-linear-gradient"
import AntDesign from 'react-native-vector-icons/AntDesign';
import {COLOR_GRAY_BACKGROUND, COLOR_GRAY_LINE, COLOR_HEADER_END, COLOR_HEADER_START, COLOR_WHITE} from "../../../constant/PHColors"
import OffWorkView from "../../../component/OffWorkView/OffWorkView"
import {showDatePicker} from "../../../util/Picker/Picker"
import DividingLineViewComponent from "../../../component/DividingLineViewComponent/DividingLineViewComponent"
import {doGetRetrieveCacheData} from "../_Actions"

class ReportScreen extends Component {

  static navigationOptions = ({navigation}) => ({
    headerTitle: `报表`,
    headerLeft: <View/>,
    headerRight: <OffWorkView navigation={navigation}/>
  });

  // 构造
  constructor(props) {
    super(props);
    // 初始状态
    this.state = {
        showBackMsg:false,
    };
  }

  componentDidMount(): void {
    let {dispatch} = this.props;
    dispatch(doGetRetrieveCacheData());
  }

  componentWillMount() {
    if (Platform.OS === 'android'||Platform.OS==='ios') {
      BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
    }
  };

  componentWillUnmount() {
    if (Platform.OS === 'android'||Platform.OS==='ios') {
      BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
    }
  };

  onBackAndroid = () =>{
      if(this.props.navigation.isFocused()){//判断   该页面是否处于聚焦状态
          if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
              BackHandler.exitApp();//直接退出APP
          }else{
              this.lastBackPressed = Date.now();
              ToastAndroid.show('再按一次退出应用', 1000);//提示
              return true;
          }
      }
  };

  render() {
    return (
      <SafeAreaView style={styles.containerBackground}>

        <StatusBar
          barStyle="light-content"
        />

        <View style={{flex: 1}}>
          <LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={[COLOR_HEADER_START, COLOR_HEADER_END]} style={{flex: 1}}/>
          <View style={{flex: 2, backgroundColor: COLOR_GRAY_BACKGROUND}}/>
        </View>

        <ScrollView style={styles.scroll}>

          <TouchableOpacity activeOpacity={1} onPress={() => {
            this.props.navigation.navigate('OnlineReviewListScreen');
          }}>
            <View style={styles.top}>
              {/* */}
              <LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={[COLOR_HEADER_START, COLOR_HEADER_END]} style={{flex: 1}}>
                <View style={styles.topTop}>
                  <TouchableOpacity style={styles.topTop} activeOpacity={0.8} onPress={() => {
                    showDatePicker();
                  }}>
                    <Text style={styles.topTopDateText}>
                      11.24日报表
                      <Text style={styles.topTopChangeText}>
                        {'  切换'}
                      </Text>
                    </Text>
                    <AntDesign name={'right'} size={14} style={{color: COLOR_WHITE}}/>
                    <View style={{width: 20}}/>
                  </TouchableOpacity>
                </View>

                <View style={styles.topCenter}>
                  {/* 评分 */}
                  <Text style={styles.pointNumberText}>
                    4.0
                    <Text style={styles.pointText}>
                      分
                    </Text>
                  </Text>

                  <View style={{height: 30, marginTop: 10, flexDirection: 'row', alignItems: 'center'}}>
                    <Text style={[styles.infoText]}>
                      本周客人平均评分,
                      <Text style={styles.infoTextTheme}>
                        {'  上周4.6分'}
                      </Text>
                    </Text>

                    <View style={{width: 20, height: 20, justifyContent: 'center', alignItems: 'center'}}>
                      <AntDesign name={'right'} size={14} style={{color: COLOR_WHITE}}/>
                    </View>
                  </View>
                </View>
              </LinearGradient>
            </View>
          </TouchableOpacity>

          <DividingLineViewComponent lineHeight={10}/>

          <View style={{flexDirection: 'row'}}>
            {/* 住客服务 */}
            <TouchableOpacity activeOpacity={0.9} onPress={() => {
              this.props.navigation.navigate('TenantServiceScreen');
            }}>
              <View style={styles.cellBoxLeft}>
                <View style={styles.cellLeft}>
                  <Image style={styles.cellImage} source={require('../../../resource/report/bb_zkfw.png')}/>
                </View>
                <View style={styles.cellRight}>
                  <View style={styles.cellRightTop}>
                    <Text style={styles.cellTitleText}>
                      住客服务
                    </Text>
                  </View>
                  <View style={styles.cellRightBottom}>
                    <Text style={styles.cellSubTitleText}>
                      33% 超时异常
                    </Text>
                  </View>
                </View>
              </View>
            </TouchableOpacity>

            {/* 客人偏好*/}
            <TouchableOpacity activeOpacity={0.8} onPress={() => {
              this.props.navigation.navigate('GuestPreferenceScreen')
            }}>
              <View style={styles.cellBoxRight}>
                <View style={styles.cellLeft}>
                  <Image style={styles.cellImage} source={require('../../../resource/report/bb_krph.png')}/>
                </View>
                <View style={styles.cellRight}>
                  <View style={styles.cellRightTop}>
                    <Text style={styles.cellTitleText}>
                      客人偏好
                    </Text>
                  </View>
                  <View style={styles.cellRightBottom}>
                    <Text style={styles.cellSubTitleText}>
                      无对客服务单
                    </Text>
                  </View>
                </View>
              </View>
            </TouchableOpacity>
          </View>

          <View style={{flexDirection: 'row'}}>
            {/* 客房卫生 */}
            <TouchableOpacity activeOpacity={0.8} onPress={() => {
              this.props.navigation.navigate('RoomHygieneScreen')
            }}>
              <View style={styles.cellBoxLeft}>
                <View style={styles.cellLeft}>
                  <Image style={styles.cellImage} source={require('../../../resource/report/bb_kfws.png')}/>
                </View>
                <View style={styles.cellRight}>
                  <View style={styles.cellRightTop}>
                    <Text style={styles.cellTitleText}>
                      客房卫生
                    </Text>
                  </View>
                  <View style={styles.cellRightBottom}>
                    <Text style={styles.cellSubTitleText}>
                      --
                    </Text>
                  </View>
                </View>
              </View>
            </TouchableOpacity>

            {/* 全部网评 */}
            <TouchableOpacity activeOpacity={0.8} onPress={() => {
              this.props.navigation.navigate('AllOnlineReviewsScreen')
            }}>
              <View style={styles.cellBoxRight}>
                <View style={styles.cellLeft}>
                  <Image style={styles.cellImage} source={require('../../../resource/report/bb_qbwp.png')}/>
                </View>
                <View style={styles.cellRight}>
                  <View style={styles.cellRightTop}>
                    <Text style={styles.cellTitleText}>
                      全部网评
                    </Text>
                  </View>
                  <View style={styles.cellRightBottom}>
                    <Text style={styles.cellSubTitleText}>
                      --
                    </Text>
                  </View>
                </View>
              </View>
            </TouchableOpacity>
          </View>

          <View style={{flexDirection: 'row'}}>
            {/* 能耗 */}
            <TouchableOpacity activeOpacity={0.8} onPress={() => {
              this.props.navigation.navigate('EnergyConsumptionScreen')
            }}>
              <View style={styles.cellBoxLeft}>
                <View style={styles.cellLeft}>
                  <Image style={styles.cellImage} source={require('../../../resource/report/bb_nh.png')}/>
                </View>
                <View style={styles.cellRight}>
                  <View style={styles.cellRightTop}>
                    <Text style={styles.cellTitleText}>
                      能耗
                    </Text>
                  </View>
                  <View style={styles.cellRightBottom}>
                    <Text style={styles.cellSubTitleText}>
                      --
                    </Text>
                  </View>
                </View>
              </View>
            </TouchableOpacity>

            {/* 设施设备 */}
            <TouchableOpacity activeOpacity={0.8} onPress={() => {
              this.props.navigation.navigate('FacilitiesAndEquipmentScreen')
            }}>
              <View style={styles.cellBoxRight}>
                <View style={styles.cellLeft}>
                  <Image style={styles.cellImage} source={require('../../../resource/report/bb_sssb.png')}/>
                </View>
                <View style={styles.cellRight}>
                  <View style={styles.cellRightTop}>
                    <Text style={styles.cellTitleText}>
                      设施设备
                    </Text>
                  </View>
                  <View style={styles.cellRightBottom}>
                    <Text style={styles.cellSubTitleText}>
                      --
                    </Text>
                  </View>
                </View>
              </View>
            </TouchableOpacity>
          </View>


          <View style={{flexDirection: 'row'}}>
            {/* 员工激励 */}
            <TouchableOpacity activeOpacity={0.8} onPress={() => {
              this.props.navigation.navigate('EmployeeIncentiveScreen')
            }}>
              <View style={styles.cellBoxLeft}>
                <View style={styles.cellLeft}>
                  <Image style={styles.cellImage} source={require('../../../resource/report/bb_ygjl.png')}/>
                </View>
                <View style={styles.cellRight}>
                  <View style={styles.cellRightTop}>
                    <Text style={styles.cellTitleText}>
                      员工激励
                    </Text>
                  </View>
                  <View style={styles.cellRightBottom}>
                    <Text style={styles.cellSubTitleText}>
                      激发员工积极性
                    </Text>
                  </View>
                </View>
              </View>
            </TouchableOpacity>
          </View>

        </ScrollView>

        {/*退出提示信息*/}
        <Modal visible={this.state.showBackMsg} animationType = {'none'} transparent = {true} onRequestClose={()=> this.onRequestClose()} >
          <View style={styles.modalContainer} onPress={()=> this.onRequestClose()}>
              <View style={styles.checkModalBody}>
                  <View style={styles.checkModalHeader}>
                      <Text style={styles.checkModalHeaderText}>
                          放弃新建工单么？
                      </Text>
                  </View>
              </View>
          </View>
        </Modal>

      </SafeAreaView>
    )
  }

}

const props = state => {
  return {}
};

export default ReportScreen = connect(props)(ReportScreen);